<template>
    <div >
        <el-carousel trigger="click"  >
            <el-carousel-item v-for="item in carouselList" >
                <img :src="item.appAdvertiseUrl" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script lang='ts' setup>
import carouselApi from '@/api/carousel';

import { onMounted, ref } from 'vue';

const carouselList = ref();
const getCarouselList = async () => {
    let res = await carouselApi.getCarousel()
    carouselList.value = res
}


onMounted(() => {
    getCarouselList()
    // getDetailsList()
})
</script>

<style scoped lang="stylus">
.el-carousel {
    width: 1200px;
    /deep/ .el-carousel__indicators {// 指示器
        left: unset;
        transform: unset;
        right: 50%;
    }
    /deep/ .el-carousel__button {// 指示器按钮
        width: 15px;
        height: 15px;
        border: none;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.8);
    }
    /deep/ .is-active .el-carousel__button {// 指示器激活按钮
        background: #fff;
    }
}

</style>

